<template>
  <div>
    <h-table title="表格示例" :columns="columns" :requestMethod="fetchData">
      <template #topTools>
        <h-button>新增</h-button>
      </template>
    </h-table>
  </div>
</template>
<script setup lang="tsx">
import { baseColunm } from './table'
import { useTable } from '@/components/core/HTable'
import type { ColunmType } from './table'
const fetchData = async () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          "name": "Alice",
          "email": "alice@example.com",
          "age": 25,
          "password": "password123",
          "qq": "123456789",
          "gender": 0
        },
        {
          "name": "Bob",
          "email": "bob@example.com",
          "age": 30,
          "password": "password456",
          "qq": "987654321",
          "gender": 1
        },
        {
          "name": "Charlie",
          "email": "charlie@example.com",
          "age": 35,
          "password": "password789",
          "qq": "1122334455",
          "gender": 1
        },
        {
          "name": "Diana",
          "email": "diana@example.com",
          "age": 28,
          "password": "passwordabc",
          "qq": "5566778899",
          "gender": 0
        },
        {
          "name": "Eve",
          "email": "eve@example.com",
          "age": 22,
          "password": "passworddef",
          "qq": "9988776655",
          "gender": 0
        },
        {
          "name": "Frank",
          "email": "frank@example.com",
          "age": 26,
          "password": "passwordghi",
          "qq": "1234567890",
          "gender": 1
        },
        {
          "name": "Grace",
          "email": "grace@example.com",
          "age": 31,
          "password": "passwordjkl",
          "qq": "9876543210",
          "gender": 0
        },
        {
          "name": "Henry",
          "email": "henry@example.com",
          "age": 36,
          "password": "passwordmno",
          "qq": "11223344556",
          "gender": 1
        },
        {
          "name": "Ivy",
          "email": "ivy@example.com",
          "age": 29,
          "password": "passwordpqr",
          "qq": "55667788990",
          "gender": 0
        },
        {
          "name": "Jack",
          "email": "jack@example.com",
          "age": 23,
          "password": "passwordstu",
          "qq": "99887766554",
          "gender": 1
        },
        {
          "name": "Alice1",
          "email": "alice1@example.com",
          "age": 27,
          "password": "passwordvwx",
          "qq": "12345678901",
          "gender": 0
        },
        {
          "name": "Bob1",
          "email": "bob1@example.com",
          "age": 32,
          "password": "passwordyz",
          "qq": "98765432101",
          "gender": 1
        },
        {
          "name": "Charlie1",
          "email": "charlie1@example.com",
          "age": 37,
          "password": "passwordabc1",
          "qq": "112233445566",
          "gender": 1
        },
        {
          "name": "Diana1",
          "email": "diana1@example.com",
          "age": 30,
          "password": "passworddef1",
          "qq": "556677889900",
          "gender": 0
        },
        {
          "name": "Eve1",
          "email": "eve1@example.com",
          "age": 24,
          "password": "passwordghi1",
          "qq": "998877665544",
          "gender": 0
        },
        {
          "name": "Frank1",
          "email": "frank1@example.com",
          "age": 28,
          "password": "passwordjkl1",
          "qq": "123456789012",
          "gender": 1
        },
        {
          "name": "Grace1",
          "email": "grace1@example.com",
          "age": 33,
          "password": "passwordmno1",
          "qq": "987654321012",
          "gender": 0
        },
        {
          "name": "Henry1",
          "email": "henry1@example.com",
          "age": 38,
          "password": "passwordpqr1",
          "qq": "1122334455667",
          "gender": 1
        },
        {
          "name": "Ivy1",
          "email": "ivy1@example.com",
          "age": 31,
          "password": "passwordstu1",
          "qq": "5566778899001",
          "gender": 0
        },
        {
          "name": "Jack1",
          "email": "jack1@example.com",
          "age": 25,
          "password": "passwordvwx1",
          "qq": "9988776655445",
          "gender": 1
        },
        {
          "name": "Alice2",
          "email": "alice2@example.com",
          "age": 29,
          "password": "passwordyz1",
          "qq": "1234567890123",
          "gender": 0
        },
        {
          "name": "Bob2",
          "email": "bob2@example.com",
          "age": 34,
          "password": "passwordabc2",
          "qq": "9876543210123",
          "gender": 1
        },
        {
          "name": "Charlie2",
          "email": "charlie2@example.com",
          "age": 39,
          "password": "passworddef2",
          "qq": "11223344556677",
          "gender": 1
        },
        {
          "name": "Diana2",
          "email": "diana2@example.com",
          "age": 32,
          "password": "passwordghi2",
          "qq": "55667788990011",
          "gender": 0
        },
        {
          "name": "Eve2",
          "email": "eve2@example.com",
          "age": 26,
          "password": "passwordjkl2",
          "qq": "99887766554455",
          "gender": 0
        },
        {
          "name": "Frank2",
          "email": "frank2@example.com",
          "age": 30,
          "password": "passwordmno2",
          "qq": "12345678901234",
          "gender": 1
        },
        {
          "name": "Grace2",
          "email": "grace2@example.com",
          "age": 35,
          "password": "passwordpqr2",
          "qq": "98765432101234",
          "gender": 0
        },
        {
          "name": "Henry2",
          "email": "henry2@example.com",
          "age": 40,
          "password": "passwordstu2",
          "qq": "112233445566778",
          "gender": 1
        },
        {
          "name": "Ivy2",
          "email": "ivy2@example.com",
          "age": 33,
          "password": "passwordvwx2",
          "qq": "556677889900112",
          "gender": 0
        },
        {
          "name": "Jack2",
          "email": "jack2@example.com",
          "age": 27,
          "password": "passwordyz2",
          "qq": "998877665544556",
          "gender": 1
        },
        {
          "name": "Alice3",
          "email": "alice3@example.com",
          "age": 31,
          "password": "passwordabc3",
          "qq": "123456789012345",
          "gender": 0
        },
        {
          "name": "Bob3",
          "email": "bob3@example.com",
          "age": 36,
          "password": "passworddef3",
          "qq": "987654321012345",
          "gender": 1
        },
        {
          "name": "Charlie3",
          "email": "charlie3@example.com",
          "age": 41,
          "password": "passwordghi3",
          "qq": "1122334455667788",
          "gender": 1
        },
        {
          "name": "Diana3",
          "email": "diana3@example.com",
          "age": 34,
          "password": "passwordjkl3",
          "qq": "5566778899001122",
          "gender": 0
        }
      ])
    }, 1000)
  })
}
const [HTable, hTableRef] = useTable()
const columns: ColunmType[] = [
  ...baseColunm,
  {
    name: '操作',
    index: 'TOOL',
    fixed: 'right',
    width: 200,
    hideSearch: true,
    actions: ({ row }) => [{
      text: '删除',
      popConfirm: {
        title: '确定删除吗？',
        onConfirm: () => {
          console.log('删除', row)
          // hTableRef?.refresh()
        }
      }
    }, {
      text: '编辑',
      onClick: () => {
        console.log('编辑', row)
      }
    }]
  }
]
</script>
